;
(function() {
	$(function() {
		var $liwidth = $('.list1 li').eq(0).width();
		var $sfw = ($('.bf').width()) * ($('.sp').width()) / ($('.bp').width());
		var $sfh = ($('.bf').height()) * ($('.sp').height()) / ($('.bp').height());
		$('.sf').width($sfw);
		$('.sf').height($sfh);
		var $bili = ($('.bp').width()) / ($('.sp').width());

		$('.sp').hover(function() {
			$('.sf').show();
			$('.bf').show();
			$(document).on('mousemove', function(ev) {
				var ev = ev || window.event;
				sfMove(ev);
			})
		}, function() {
			$('.sf').hide();
			$('.bf').hide();
		});

		function sfMove(ev) {
			var $l = ev.pageX - $('.sp')[0].offsetLeft - $('.sf')[0].offsetWidth / 2 - 2;
			var $t = ev.pageY - $('.sp')[0].offsetTop - $('.sf')[0].offsetHeight / 2 - 2;
			if($l <= 0) {
				$l = 0;
			} else if($l >= $('.sp').width() - $('.sf').width() - 2) {
				$l = $('.sp').width() - $('.sf').width() - 2;
			}
			if($t <= 0) {
				$t = 0;
			} else if($t >= $('.sp').height() - $('.sf').height() - 2) {
				$t = $('.sp').height() - $('.sf').height() - 2;
			}
			$('.sf')[0].style.left = $l + 'px';
			$('.sf')[0].style.top = $t + 'px';
			$('.bp')[0].style.left = -$l * $bili + 'px';
			$('.bp')[0].style.top = -$t * $bili + 'px';
			console.log($('.sf')[0].style.offsetTop);
		}

		$('.list1 li').each(function(i) {
			$('.list1 li').eq(i).hover(function() {
				$(this).css('border-color', 'red');
				var $url = $(this).find('img')[0].src;
				$('.sp').find('img').attr('src', $url);
				$('.bp').attr('src', $url);
			}, function() {
				$(this).css('border-color', '#e1e1e1');
			})
		})

		var $num = 4;
		$('.list1').width($liwidth * $('.list1 li').length + 100);
		if($('.list1 li').length < 4) {
			$('.img-list .right')[0].style.color = '#fff';
			$('.right')[0].style.cursor = 'not-allowed';
		}
		$('.right').on('click', function() {
			if($('.list1 li').length > $num) {
				$num++;
				if($('.list1 li').length == $num) {
					$('.img-list .right')[0].style.color = '#fff';
					$('.right')[0].style.cursor = 'not-allowed';
				}
				$('.list1').animate({
					left: -$liwidth * ($num - 4) - 20
				}, 500);
				$('.img-list .left')[0].style.color = 'gray';
				$('.left')[0].style.cursor = 'pointer';
			}
		})
		$('.left').on('click', function() {
			if($('.list1 li').length > 4) {
				$num--;
				if($num == 4) {
					$('.img-list .left')[0].style.color = '#fff';
					$('.left')[0].style.cursor = 'not-allowed';
				}
				$('.img-list .right')[0].style.color = 'gray';
				$('.right')[0].style.cursor = 'pointer';
				$('.list1').animate({
					left: $liwidth * (4 - $num) - 8
				}, 500);
			}
		});
	})
})();